<template>
    <div class="app-container">
      <el-card :style="{ borderRadius: '5px' }">
        <div class="filter-container">
          <el-input v-model="model.name" placeholder="请输入商家名称" style="width: 200px; margin-left: 10px"
            @keyup.enter.native="handleFilter" />
          <el-select v-model="model.state" style="width: 160px; margin: 0 10px" placeholder="请选择订单状态" clearable>
  
            <el-option v-for="item in stateList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
  
          <el-button v-waves type="primary" style="margin-left: 10px" plain icon="el-icon-search"
            @click="handleFilter">搜索</el-button>
        </div>
      </el-card>
      <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
        <el-table v-loading.body="!listLoading" :header-row-style="{ height: '70px' }" :header-cell-style="{
          color: '',
          fontSize: '',
          backgroundColor: '#dfe6ec',
        }" :data="list" border fit highlight-current-row style="width: 100%" tooltip-effect="dark">
          <el-table-column label="序号" width="50px" align="center" type="index" show-overflow-tooltip />
          <el-table-column label="商家id" prop="shopid" min-width="80px" align="center" show-overflow-tooltip />
          <el-table-column label="商家类别" prop="category_name" min-width="100px" align="center" show-overflow-tooltip />

          <el-table-column label="商家名称" prop="name" min-width="150px" align="center" show-overflow-tooltip />
          <el-table-column prop="logo" label="封面图" min-width="100px" align="center">
            <template slot-scope="{ row }">
              <div style="display: flex; justify-content: center">
                <HzImg :src="row.logo" cssStyle="height: 80px;width: 80px" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="登陆账号" prop="login_name" min-width="150px" align="center" show-overflow-tooltip />
          <el-table-column label="登陆手机号" prop="login_phone" min-width="100px" align="center" show-overflow-tooltip />
          <el-table-column label="登录email" prop="logine_email" min-width="150px" align="center" show-overflow-tooltip />
          <el-table-column label="登录密码" prop="login_password" min-width="150px" align="center" show-overflow-tooltip />

          <el-table-column label="地址" prop="address" align="center" show-overflow-tooltip />
          <el-table-column label="介绍" prop="introduce" align="center" show-overflow-tooltip />
          <el-table-column label="电话" prop="phone" align="center" show-overflow-tooltip />
          <el-table-column label="状态" min-width="80px" align="center" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.state == 0">待审核</span>
              <span v-if="row.state == 1">已审核</span>
              <span v-if="row.state == '-1'">未通过</span>
            </template>
          </el-table-column>
  
          <el-table-column label="操作" align="center" width="0px" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain v-if="scope.row.state == 0" @click="handleReview(scope.row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="listLoading" class="pagination-container">
          <el-pagination :current-page.sync="model.pageNo" :page-sizes="[10, 20, 30, 50]" :page-size="9"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </el-card>
      <el-dialog title="审核" :visible.sync="showAudit" width="35%">
      <el-form ref="dataForm" label-width="120px">
        <el-form-item label="审核意见:">
          <el-radio v-model="result" label="1">通过</el-radio>
          <el-radio v-model="result" label="-1">不通过</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancelAudit('form')">取 消</el-button>
        <el-button type="primary" plain @click.native.prevent="doAudit('form')">确 定</el-button>
      </div>

    </el-dialog>
  
  
    </div>
  </template>
    
  <script>
  import HzFileUpload from "@/custom/HzFileUpload";
  import HzImgUpload from "@/custom/HzImgUpload";
  import HzImg from "@/custom/HzImg";
  import HzLink from "@/custom/HzLink";
  import waves from "@/directive/waves"; // waves directive
  import {
    getShopList,
    getExamineShop
  } from "@/api/system/user";
  
  export default {
    name: "Common",
    directives: {
      waves,
    },
    components: {
      HzFileUpload,
      HzImgUpload,
      HzImg,
      HzLink,
    },
    data() {
      return {
        loading: false,
        name: "",
        list: [],
        total: 0,
        listLoading: false,
        extra: {}, //额外参数(用于格式化)
        type: 1,
        model: {
          pageNo: 1,
          pageSize: 10,
        },
        result:"1",
        showAudit:false,
        stateList: [
          { name: "待审核", value: 0 },
          { name: "已审核", value: 1 },
          { name: "未通过", value: '-1' },
        ]
      };
    },
    created() {
      this.getList();
    },
  
    mounted() { },
    methods: {

      handleSizeChange(val) {
        this.model.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.model.pageNo = val;
        this.getList();
      },
      getList() {
        this.listLoading = false;
        getShopList(this.model).then((response) => {
          let data = response.data.records;
          this.list = data;
          this.extra = response.extra;
          this.total = response.data.total;
          this.listLoading = true;
        });
      },
      handleReview(row){
        this.shopid = row.shopid;
        this.showAudit = true;
      },
      cancelAudit() {
      this.result = '1';
      this.showAudit = false;
    },
    doAudit() {
       let obj = {
        shopid: this.shopid,
        result: this.result
       }
       getExamineShop(obj).then(() => {
        this.getList();
        this.showAudit = false;
        this.$notify({
          title: "成功",
          message: "操作成功",
          type: "success",
          duration: 2000,
        });
      });
    },

      handleFilter() {
        this.model.pageNo = 1;
        this.getList();
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  </style>
    